<template>
  <div class="wrap h100">
    <div class="wrap">
      <header>
        <span @click="showCarColor">{{ colorText }}</span> |
        <span @click="showCarType">{{ carTypeText }}</span>
      </header>
      <div class="section">
        <section v-for="item in carListImg" :key="item.Id">
          <ul>
            <li
              @click="imageDetail(index, item.Id)"
              v-for="(items, index) in item.List"
              :key="index"
              :style="{
                backgroundImage: `url(${items.Url.split('{0}')[0]}3.jpg)`,
              }"
            >
              <p v-if="index === 0">
                <span>
                  {{ item.Name }}
                </span>
                <span> {{ item.Count }}张> </span>
              </p>
            </li>
          </ul>
        </section>
        <section v-show="carListImg.length === 0" class="no-content">
          <img src="//h5.chelun.com/2017/official/img/no-img.png" />
          <span>还没有内容</span>
        </section>
      </div>
      <!-- 车系颜色 -->
      <transition name="slide">
        <CarColor
          v-show="isShowImageColor"
          @changeImageColor="changeImageColor"
          :ImageColor="ImageColor"
          :first="first"
        >
          <p @click="showImgColor" class="all">全部颜色</p>
        </CarColor>
      </transition>
      <!-- 车系类型 -->
      <transition name="slide">
        <CarType v-show="isShowCarType" @changeCarListImg="carTypeChangeList">
          <p @click="hideCarType" class="all">全部车款</p>
        </CarType>
      </transition>

      <MySwiper
        v-show="swiperFlag"
        @closeSwiper="() => (swiperFlag = false)"
        :mySwiperList="mySwiperList"
        :mySwiperCount="mySwiperCount"
      ></MySwiper>
    </div>
  </div>
</template>

<script>
import CarColor from "@/components/Img/CarColor.vue";
import CarType from "@/components/Img/CarType.vue";
import MySwiper from "@/components/Img/MySwiper.vue";
import {
  getImageList,
  getImageColor,
  getCategoryImageList,
} from "@/api/carList";
export default {
  components: {
    CarColor,
    CarType,
    MySwiper,
  },
  data() {
    return {
      isShowImageColor: false,
      isShowCarType: false,
      swiperFlag: false,
      ImageColor: {},
      carListImg: [],
      mySwiperList: [],
      mySwiperCount: 0,
      colorText: "全部颜色",
      carTypeText: "车款",
      first: null,
      carInfo: {
        SerialID: this.$route.params.id,
        ColorID: "",
        CarID: "",
      },
      pageInfo: {
        Page: 1,
        PageSize: 30,
      },
    };
  },
  async created() {
    this.init();
    let res = await getImageColor({
      SerialID: this.$route.params.id,
    });
    this.first = Object.keys(res)[0];
  },
  methods: {
    async init() {
      let res = await getImageList({
        ...this.carInfo,
      });
      this.carListImg = res;
    },
    async showCarColor() {
      this.isShowImageColor = true;
      let res = await getImageColor({
        SerialID: this.$route.params.id,
      });
      this.ImageColor = res;
    },
    async changeImageColor({ name, flag, ColorId }) {
      //选了颜色以后
      this.isShowImageColor = flag;
      this.colorText = name;
      this.carInfo.ColorID = ColorId;
      this.init();
    },
    carTypeChangeList({ text, flag, CarId }) {
      //选了车类型以后
      this.isShowCarType = flag;
      this.carTypeText = text;
      this.carInfo.CarID = CarId;
      this.init();
    },
    showImgColor() {
      this.isShowImageColor = false;
      this.colorText = "全部颜色";
      this.carInfo.ColorID = "";
      this.init();
    },
    showCarType() {
      this.isShowCarType = true;
    },
    hideCarType() {
      this.isShowCarType = false;
      this.carTypeText = "车款";
      this.carInfo.CarID = "";
      this.init();
    },
    async imageDetail(index, ImageID) {
      if (index) {
        this.swiperFlag = true;
        let res = await getCategoryImageList({
          SerialID: this.$route.params.id,
          ImageID,
          ...this.pageInfo,
        });
        this.mySwiperList = res;
        this.mySwiperCount = index + 1;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.wrap {
  background: #f4f4f4;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section {
  // text-align: center;
  position: absolute;
  top: 40px;
}
header {
  position: fixed;
  background: #fff;
  top: 0;
  width: 100%;
  height: 40px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  span:first-of-type,
  span:last-of-type {
    width: 40%;
    height: 100%;
    // text-align: left;
    line-height: 40px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    padding-right: 3px;
    line-height: 40px;
    text-align: center;
    &:before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-top: none;
      border-right: 1px solid #aaa;
      border-bottom: 1px solid #aaa;
      border-left: none;
      position: absolute;
      right: 15px;
      top: 40%;
      transform: rotate(45deg) translateY(-50%);
    }
  }
}
// section:nth-child(2) {
//   padding-top: 40px;
// }
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 3px;
  p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(81, 56, 130, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    span:first-child {
      font-size: 13px;
      color: #fff;
    }
    span:last-child {
      font-size: 13px;
      color: #fff;
      margin-top: 6px;
    }
  }
}
li {
  position: relative;
  width: 123px;
  height: 123px;
  padding: 0;
  background-size: cover;
  background-position: center;
  margin-top: 3px;
}
.all {
  margin: 8px 0;
  font-size: 17px;
  color: #00afff;
  background: #fff;
  text-align: center;
  line-height: 40px;
  height: 40px;
}

.no-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    margin-top: 60px;
    width: 87px;
  }
  span {
    margin-top: 15px;
    color: silver;
  }
}
</style>
